<template>
	<AdminLayout activeKey="chat-statistics" :breadcrumbs="['首页','客服管理','工作台统计']" tabTitle="客服工作台统计">
		<view class="statistics-page">
			<!-- 顶部工具栏 -->
			<view class="toolbar">
				<view class="toolbar-left">
					<view class="page-header">
						<text class="page-title">客服工作台统计</text>
						<text class="page-subtitle">实时监控客服工作情况与服务质量</text>
					</view>
					<view class="last-update">
						<text class="iconfont icon-shijian"></text>
						<text>最后更新：{{ lastUpdateTime }}</text>
					</view>
				</view>
				<view class="toolbar-right">
					<!-- 时间范围选择 -->
					<view class="time-range-tabs">
						<text 
							class="range-tab" 
							:class="{ active: timeRange === 'today' }" 
							@click="setTimeRange('today')"
						>今日</text>
						<text 
							class="range-tab" 
							:class="{ active: timeRange === 'week' }" 
							@click="setTimeRange('week')"
						>本周</text>
						<text 
							class="range-tab" 
							:class="{ active: timeRange === 'month' }" 
							@click="setTimeRange('month')"
						>本月</text>
						<text 
							class="range-tab" 
							:class="{ active: timeRange === 'custom' }" 
							@click="setTimeRange('custom')"
						>自定义</text>
					</view>
					
					<!-- 自定义日期选择器 -->
					<view v-if="timeRange === 'custom'" class="date-pickers">
						<picker mode="date" :value="startDate" @change="onStartDateChange">
							<view class="picker-btn">
								<text class="iconfont icon-riqi"></text>
								<text>{{ startDate || '开始日期' }}</text>
							</view>
						</picker>
						<text class="date-separator">至</text>
						<picker mode="date" :value="endDate" @change="onEndDateChange">
							<view class="picker-btn">
								<text class="iconfont icon-riqi"></text>
								<text>{{ endDate || '结束日期' }}</text>
							</view>
						</picker>
					</view>
					
					<button class="refresh-btn" @click="loadAllData">
						<text class="iconfont icon-shuaxin"></text>
						<text>刷新数据</text>
					</button>
					
					<button class="export-btn" @click="exportData">
						<text class="iconfont icon-daochu"></text>
						<text>导出报表</text>
					</button>
				</view>
			</view>

			<!-- 核心指标卡片 -->
			<view class="overview-cards">
				<view class="metric-card blue">
					<view class="metric-header">
						<view class="metric-icon">
							<text class="iconfont icon-duihua"></text>
						</view>
						<view class="metric-trend" :class="{ positive: metrics.conversations.trend > 0 }">
							<text class="trend-icon">{{ metrics.conversations.trend > 0 ? '↗' : '↘' }}</text>
							<text class="trend-value">{{ Math.abs(metrics.conversations.trend) }}%</text>
						</view>
					</view>
					<view class="metric-content">
						<view class="metric-value">{{ metrics.conversations.value }}</view>
						<view class="metric-label">会话总数</view>
						<view class="metric-desc">当前时间段内的会话数</view>
					</view>
				</view>

				<view class="metric-card green">
					<view class="metric-header">
						<view class="metric-icon">
							<text class="iconfont icon-xiaoxi"></text>
						</view>
						<view class="metric-trend" :class="{ positive: metrics.messages.trend > 0 }">
							<text class="trend-icon">{{ metrics.messages.trend > 0 ? '↗' : '↘' }}</text>
							<text class="trend-value">{{ Math.abs(metrics.messages.trend) }}%</text>
						</view>
					</view>
					<view class="metric-content">
						<view class="metric-value">{{ metrics.messages.value }}</view>
						<view class="metric-label">消息总数</view>
						<view class="metric-desc">发送和接收的消息数</view>
					</view>
				</view>

				<view class="metric-card orange">
					<view class="metric-header">
						<view class="metric-icon">
							<text class="iconfont icon-shijian"></text>
						</view>
						<view class="metric-trend" :class="{ positive: metrics.responseTime.trend < 0 }">
							<text class="trend-icon">{{ metrics.responseTime.trend < 0 ? '↗' : '↘' }}</text>
							<text class="trend-value">{{ Math.abs(metrics.responseTime.trend) }}%</text>
						</view>
					</view>
					<view class="metric-content">
						<view class="metric-value">{{ metrics.responseTime.value }}s</view>
						<view class="metric-label">平均响应时间</view>
						<view class="metric-desc">首次响应平均时长</view>
					</view>
				</view>

				<view class="metric-card purple">
					<view class="metric-header">
						<view class="metric-icon">
							<text class="iconfont icon-pingjia"></text>
						</view>
						<view class="metric-trend" :class="{ positive: metrics.satisfaction.trend > 0 }">
							<text class="trend-icon">{{ metrics.satisfaction.trend > 0 ? '↗' : '↘' }}</text>
							<text class="trend-value">{{ Math.abs(metrics.satisfaction.trend) }}%</text>
						</view>
					</view>
					<view class="metric-content">
						<view class="metric-value">{{ metrics.satisfaction.value }}%</view>
						<view class="metric-label">满意度</view>
						<view class="metric-desc">用户评价满意度</view>
					</view>
				</view>
			</view>

			<!-- 图表分析区域 -->
			<view class="charts-grid">
				<!-- 会话趋势图 -->
				<view class="chart-panel large">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-qushi panel-icon"></text>
							<text>会话趋势分析</text>
						</view>
						<view class="panel-tabs">
							<text 
								class="tab-item" 
								:class="{ active: conversationTab === 'count' }" 
								@click="conversationTab = 'count'"
							>会话数</text>
							<text 
								class="tab-item" 
								:class="{ active: conversationTab === 'duration' }" 
								@click="conversationTab = 'duration'"
							>平均时长</text>
						</view>
					</view>
					<view class="chart-container">
						<QiunDataCharts 
							type="line" 
							:opts="conversationChartOpts"
							:chartData="conversationChartData"
							background="transparent"
							canvas2dH5="true"
							:canvas2dH5Width="800"
							:canvas2dH5Height="300"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总会话</text>
							<text class="stat-value">{{ conversationStats.total }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">峰值时段</text>
							<text class="stat-value">{{ conversationStats.peakHour }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">平均时长</text>
							<text class="stat-value">{{ conversationStats.avgDuration }}分钟</text>
						</view>
					</view>
				</view>

				<!-- 响应时间分布 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-shizhong panel-icon"></text>
							<text>响应时间分布</text>
						</view>
					</view>
					<view class="chart-container">
						<QiunDataCharts 
							type="column" 
							:opts="responseTimeChartOpts"
							:chartData="responseTimeChartData"
							background="transparent"
							canvas2dH5="true"
							:canvas2dH5Width="400"
							:canvas2dH5Height="300"
						/>
					</view>
					<view class="response-stats">
						<view class="response-stat-item excellent">
							<text class="stat-percent">{{ responseDistribution.excellent }}%</text>
							<text class="stat-label">优秀 (&lt;30s)</text>
						</view>
						<view class="response-stat-item good">
							<text class="stat-percent">{{ responseDistribution.good }}%</text>
							<text class="stat-label">良好 (30-60s)</text>
						</view>
						<view class="response-stat-item poor">
							<text class="stat-percent">{{ responseDistribution.poor }}%</text>
							<text class="stat-label">待改进 (&gt;60s)</text>
						</view>
					</view>
				</view>

				<!-- 问题分类统计 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-fenlei panel-icon"></text>
							<text>问题分类统计</text>
						</view>
					</view>
					<view class="chart-container">
						<QiunDataCharts 
							type="pie" 
							:opts="categoryChartOpts"
							:chartData="categoryChartData"
							background="transparent"
							canvas2dH5="true"
							:canvas2dH5Width="400"
							:canvas2dH5Height="300"
						/>
					</view>
					<view class="category-list">
						<view class="category-item" v-for="(item, index) in categoryStats" :key="index">
							<view class="category-dot" :style="{ backgroundColor: item.color }"></view>
							<text class="category-name">{{ item.name }}</text>
							<text class="category-count">{{ item.count }}</text>
							<text class="category-percent">{{ item.percent }}%</text>
						</view>
					</view>
				</view>

				<!-- 高峰时段热力图 -->
				<view class="chart-panel large">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-relitu panel-icon"></text>
							<text>咨询高峰时段热力图</text>
						</view>
						<text class="panel-desc">一周内各时段咨询量分布</text>
					</view>
					<view class="heatmap-container">
						<view class="heatmap-header">
							<view class="heatmap-label"></view>
							<view class="heatmap-hours">
								<text class="hour-label" v-for="hour in 24" :key="hour">{{ hour - 1 }}</text>
							</view>
						</view>
						<view class="heatmap-body">
							<view class="heatmap-row" v-for="(day, dayIndex) in heatmapData" :key="dayIndex">
								<view class="day-label">{{ day.name }}</view>
								<view class="heatmap-cells">
									<view 
										class="heatmap-cell" 
										v-for="(value, hourIndex) in day.values" 
										:key="hourIndex"
										:style="{ backgroundColor: getHeatColor(value) }"
										:data-value="value"
										@click="showHeatDetail(day.name, hourIndex, value)"
									>
										<text class="cell-value" v-if="value > 0">{{ value }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="heatmap-legend">
							<text class="legend-label">咨询量：</text>
							<view class="legend-gradient">
								<view class="gradient-bar"></view>
								<text class="gradient-min">少</text>
								<text class="gradient-max">多</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 工作量统计 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-tongji panel-icon"></text>
							<text>工作量统计</text>
						</view>
					</view>
					<view class="workload-list">
						<view class="workload-item" v-for="(item, index) in workloadStats" :key="index">
							<view class="workload-rank">{{ index + 1 }}</view>
							<view class="workload-info">
								<view class="workload-header">
									<text class="workload-name">{{ item.name }}</text>
									<text class="workload-value">{{ item.value }}条</text>
								</view>
								<view class="workload-bar">
									<view class="workload-fill" :style="{ width: item.percent + '%', backgroundColor: item.color }"></view>
								</view>
								<view class="workload-details">
									<text class="detail-item">响应: {{ item.avgResponse }}s</text>
									<text class="detail-item">时长: {{ item.avgDuration }}分钟</text>
									<text class="detail-item">满意度: {{ item.satisfaction }}%</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 满意度评价 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-pingjia panel-icon"></text>
							<text>满意度评价</text>
						</view>
					</view>
					<view class="satisfaction-overview">
						<view class="satisfaction-score">
							<text class="score-value">{{ satisfactionData.average }}</text>
							<text class="score-label">综合评分</text>
							<view class="score-stars">
								<text 
									class="iconfont" 
									:class="index < Math.floor(satisfactionData.average) ? 'icon-star-fill' : 'icon-star'"
									v-for="index in 5" 
									:key="index"
								></text>
							</view>
						</view>
						<view class="satisfaction-bars">
							<view class="satisfaction-bar-item" v-for="item in satisfactionData.distribution" :key="item.star">
								<text class="bar-label">{{ item.star }}星</text>
								<view class="bar-container">
									<view class="bar-fill" :style="{ width: item.percent + '%' }"></view>
								</view>
								<text class="bar-percent">{{ item.percent }}%</text>
								<text class="bar-count">({{ item.count }})</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 关键指标对比 -->
				<view class="chart-panel large">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-duibi panel-icon"></text>
							<text>关键指标对比</text>
						</view>
					</view>
					<view class="comparison-container">
						<view class="comparison-item" v-for="(item, index) in comparisonData" :key="index">
							<view class="comparison-header">
								<text class="comparison-title">{{ item.title }}</text>
								<view class="comparison-trend" :class="{ up: item.trend > 0, down: item.trend < 0 }">
									<text class="trend-arrow">{{ item.trend > 0 ? '↑' : '↓' }}</text>
									<text class="trend-text">{{ Math.abs(item.trend) }}%</text>
								</view>
							</view>
							<view class="comparison-bars">
								<view class="comparison-bar-row">
									<text class="bar-label">当期</text>
									<view class="bar-wrapper">
										<view class="bar-fill current" :style="{ width: item.current.percent + '%' }"></view>
										<text class="bar-value">{{ item.current.value }}</text>
									</view>
								</view>
								<view class="comparison-bar-row">
									<text class="bar-label">上期</text>
									<view class="bar-wrapper">
										<view class="bar-fill previous" :style="{ width: item.previous.percent + '%' }"></view>
										<text class="bar-value">{{ item.previous.value }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 详细数据表格 -->
			<view class="data-table-panel">
				<view class="panel-header">
					<view class="panel-title">
						<text class="iconfont icon-liebiao panel-icon"></text>
						<text>详细数据</text>
					</view>
					<view class="table-actions">
						<button class="table-btn" @click="refreshTable">
							<text class="iconfont icon-shuaxin"></text>
							<text>刷新</text>
						</button>
						<button class="table-btn" @click="exportTable">
							<text class="iconfont icon-daochu"></text>
							<text>导出</text>
						</button>
					</view>
				</view>
				<scroll-view scroll-x class="table-scroll">
					<view class="data-table">
						<view class="table-header">
							<text class="table-cell">日期</text>
							<text class="table-cell">会话数</text>
							<text class="table-cell">消息数</text>
							<text class="table-cell">响应时间(s)</text>
							<text class="table-cell">平均时长(分)</text>
							<text class="table-cell">满意度(%)</text>
							<text class="table-cell">模板使用</text>
						</view>
						<view class="table-row" v-for="(row, index) in tableData" :key="index">
							<text class="table-cell">{{ row.date }}</text>
							<text class="table-cell">{{ row.conversations }}</text>
							<text class="table-cell">{{ row.messages }}</text>
							<text class="table-cell">{{ row.responseTime }}</text>
							<text class="table-cell">{{ row.duration }}</text>
							<text class="table-cell">{{ row.satisfaction }}</text>
							<text class="table-cell">{{ row.templateUsage }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

export default {
	components: {
		AdminLayout,
		QiunDataCharts
	},
	data() {
		return {
			// 时间范围
			timeRange: 'today',
			startDate: '',
			endDate: '',
			lastUpdateTime: '',
			
			// 核心指标
			metrics: {
				conversations: {
					value: 0,
					trend: 0
				},
				messages: {
					value: 0,
					trend: 0
				},
				responseTime: {
					value: 0,
					trend: 0
				},
				satisfaction: {
					value: 0,
					trend: 0
				}
			},
			
			// 会话统计
			conversationTab: 'count',
			conversationStats: {
				total: 0,
				peakHour: '--',
				avgDuration: 0
			},
			conversationChartData: {},
			conversationChartOpts: {
				color: ['#667eea', '#764ba2'],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 2
				},
				extra: {
					line: {
						type: 'curve',
						width: 2,
						activeType: 'hollow'
					}
				}
			},
			
			// 响应时间分布
			responseDistribution: {
				excellent: 0,
				good: 0,
				poor: 0
			},
			responseTimeChartData: {},
			responseTimeChartOpts: {
				color: ['#91cc75'],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					data: [
						{ min: 0 }
					]
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08
					}
				}
			},
			
			// 问题分类
			categoryStats: [],
			categoryChartData: {},
			categoryChartOpts: {
				color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						ringWidth: 50,
						border: true,
						borderWidth: 2,
						borderColor: '#FFFFFF'
					}
				}
			},
			
			// 热力图数据
			heatmapData: [],
			
			// 工作量统计
			workloadStats: [],
			
			// 满意度数据
			satisfactionData: {
				average: 0,
				distribution: []
			},
			
			// 对比数据
			comparisonData: [],
			
			// 表格数据
			tableData: []
		}
	},
	
	onLoad() {
		this.initTime()
		this.loadAllData()
	},
	
	methods: {
		// 初始化时间
		initTime() {
			const now = new Date()
			this.endDate = this.formatDate(now)
			this.startDate = this.formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
			this.lastUpdateTime = this.formatDateTime(now)
		},
		
		// 设置时间范围
		setTimeRange(range) {
			this.timeRange = range
			
			const now = new Date()
			this.endDate = this.formatDate(now)
			
			switch (range) {
				case 'today':
					this.startDate = this.formatDate(now)
					break
				case 'week':
					this.startDate = this.formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
					break
				case 'month':
					this.startDate = this.formatDate(new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000))
					break
			}
			
			if (range !== 'custom') {
				this.loadAllData()
			}
		},
		
		// 开始日期改变
		onStartDateChange(e) {
			this.startDate = e.detail.value
			this.loadAllData()
		},
		
		// 结束日期改变
		onEndDateChange(e) {
			this.endDate = e.detail.value
			this.loadAllData()
		},
		
		// 加载所有数据
		async loadAllData() {
			uni.showLoading({ title: '加载中...' })
			
			try {
				const res = await uniCloud.callFunction({
					name: 'getChatStatistics',
					data: {
						startDate: this.startDate,
						endDate: this.endDate,
						timeRange: this.timeRange
					}
				})
				
				if (res.result.code === 200) {
					const data = res.result.data
					
					// 更新核心指标
					this.metrics = data.metrics
					
					// 更新会话趋势
					this.conversationStats = data.conversationStats
					this.updateConversationChart(data.conversationTrend)
					
					// 更新响应时间
					this.responseDistribution = data.responseDistribution
					this.updateResponseTimeChart(data.responseTimeData)
					
					// 更新问题分类
					this.categoryStats = data.categoryStats
					this.updateCategoryChart(data.categoryStats)
					
					// 更新热力图
					this.heatmapData = data.heatmapData
					
					// 更新工作量
					this.workloadStats = data.workloadStats
					
					// 更新满意度
					this.satisfactionData = data.satisfactionData
					
					// 更新对比数据
					this.comparisonData = data.comparisonData
					
					// 更新表格
					this.tableData = data.tableData
					
					this.lastUpdateTime = this.formatDateTime(new Date())
				} else {
					uni.showToast({
						title: res.result.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载数据失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 更新会话趋势图
		updateConversationChart(data) {
			this.conversationChartData = {
				categories: data.dates,
				series: [
					{
						name: this.conversationTab === 'count' ? '会话数' : '平均时长',
						data: this.conversationTab === 'count' ? data.counts : data.durations
					}
				]
			}
		},
		
		// 更新响应时间图
		updateResponseTimeChart(data) {
			this.responseTimeChartData = {
				categories: data.ranges,
				series: [
					{
						name: '数量',
						data: data.counts
					}
				]
			}
		},
		
		// 更新分类图
		updateCategoryChart(data) {
			this.categoryChartData = {
				series: [
					{
						data: data.map(item => ({
							name: item.name,
							value: item.count
						}))
					}
				]
			}
		},
		
		// 获取热力图颜色
		getHeatColor(value) {
			if (value === 0) return '#f5f7fa'
			if (value < 5) return '#c6e48b'
			if (value < 10) return '#7bc96f'
			if (value < 20) return '#239a3b'
			return '#196127'
		},
		
		// 显示热力图详情
		showHeatDetail(day, hour, value) {
			uni.showToast({
				title: `${day} ${hour}:00 - 咨询量: ${value}`,
				icon: 'none'
			})
		},
		
		// 刷新表格
		refreshTable() {
			this.loadAllData()
		},
		
		// 导出表格
		exportTable() {
			uni.showToast({
				title: '导出功能开发中',
				icon: 'none'
			})
		},
		
		// 导出数据
		exportData() {
			uni.showModal({
				title: '导出报表',
				content: '确定要导出当前统计数据吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '导出功能开发中',
							icon: 'none'
						})
					}
				}
			})
		},
		
		// 格式化日期
		formatDate(date) {
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		
		// 格式化日期时间
		formatDateTime(date) {
			const dateStr = this.formatDate(date)
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${dateStr} ${hours}:${minutes}:${seconds}`
		}
	},
	
	watch: {
		conversationTab() {
			// 当切换标签时重新加载图表数据
			this.loadAllData()
		}
	}
}
</script>

<style scoped>
.statistics-page {
	padding: 20px;
	background: #f5f7fa;
	min-height: 100vh;
}

/* 工具栏 */
.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 20px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	flex-wrap: wrap;
	gap: 16px;
}

.toolbar-left {
	flex: 1;
	min-width: 250px;
}

.page-header {
	margin-bottom: 8px;
}

.page-title {
	font-size: 24px;
	font-weight: 600;
	color: #1f2937;
	margin-right: 12px;
}

.page-subtitle {
	font-size: 14px;
	color: #6b7280;
}

.last-update {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #9ca3af;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.time-range-tabs {
	display: flex;
	background: #f3f4f6;
	border-radius: 8px;
	padding: 4px;
	gap: 4px;
}

.range-tab {
	padding: 6px 16px;
	border-radius: 6px;
	font-size: 13px;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.3s;
	white-space: nowrap;
}

.range-tab.active {
	background: white;
	color: #667eea;
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.date-pickers {
	display: flex;
	align-items: center;
	gap: 8px;
}

.date-separator {
	font-size: 13px;
	color: #9ca3af;
}

.picker-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
	white-space: nowrap;
}

.refresh-btn, .export-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
	white-space: nowrap;
}

.refresh-btn {
	background: white;
	color: #374151;
	border: 1px solid #e5e7eb;
}

.export-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

/* 核心指标卡片 */
.overview-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

.metric-card {
	padding: 24px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
}

.metric-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.metric-card.blue::before {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-card.green::before {
	background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.metric-card.orange::before {
	background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.metric-card.purple::before {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.metric-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.metric-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
}

.metric-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	font-size: 24px;
}

.metric-card.blue .metric-icon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.metric-card.green .metric-icon {
	background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
	color: white;
}

.metric-card.orange .metric-icon {
	background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	color: white;
}

.metric-card.purple .metric-icon {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	color: white;
}

.metric-trend {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #fef2f2;
	color: #ef4444;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.metric-trend.positive {
	background: #f0fdf4;
	color: #10b981;
}

.metric-content {
	/* Content styles */
}

.metric-value {
	font-size: 32px;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 8px;
	line-height: 1;
}

.metric-label {
	font-size: 14px;
	color: #6b7280;
	font-weight: 500;
	margin-bottom: 4px;
}

.metric-desc {
	font-size: 12px;
	color: #9ca3af;
}

/* 图表网格 */
.charts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

.chart-panel {
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.chart-panel.large {
	grid-column: span 2;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #f3f4f6;
}

.panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
}

.panel-icon {
	font-size: 20px;
	color: #667eea;
}

.panel-desc {
	font-size: 13px;
	color: #9ca3af;
}

.panel-tabs {
	display: flex;
	gap: 8px;
}

.tab-item {
	padding: 6px 16px;
	border-radius: 6px;
	font-size: 13px;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.3s;
}

.tab-item.active {
	background: #667eea;
	color: white;
}

.chart-container {
	padding: 20px;
	min-height: 300px;
}

.chart-stats {
	display: flex;
	justify-content: space-around;
	padding: 20px;
	border-top: 1px solid #f3f4f6;
}

.stat-item {
	text-align: center;
}

.stat-label {
	display: block;
	font-size: 13px;
	color: #9ca3af;
	margin-bottom: 8px;
}

.stat-value {
	display: block;
	font-size: 24px;
	font-weight: 600;
	color: #1f2937;
}

/* 响应时间统计 */
.response-stats {
	display: flex;
	justify-content: space-around;
	padding: 20px;
	border-top: 1px solid #f3f4f6;
}

.response-stat-item {
	text-align: center;
}

.stat-percent {
	display: block;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 8px;
}

.response-stat-item.excellent .stat-percent {
	color: #10b981;
}

.response-stat-item.good .stat-percent {
	color: #f59e0b;
}

.response-stat-item.poor .stat-percent {
	color: #ef4444;
}

/* 分类列表 */
.category-list {
	padding: 20px;
	border-top: 1px solid #f3f4f6;
}

.category-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f9fafb;
}

.category-item:last-child {
	border-bottom: none;
}

.category-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.category-name {
	flex: 1;
	font-size: 14px;
	color: #374151;
}

.category-count {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin-right: 8px;
}

.category-percent {
	font-size: 13px;
	color: #9ca3af;
}

/* 热力图 */
.heatmap-container {
	padding: 20px;
}

.heatmap-header {
	display: flex;
	margin-bottom: 8px;
}

.heatmap-label {
	width: 60px;
}

.heatmap-hours {
	display: flex;
	flex: 1;
}

.hour-label {
	flex: 1;
	text-align: center;
	font-size: 10px;
	color: #9ca3af;
}

.heatmap-body {
	/* Body styles */
}

.heatmap-row {
	display: flex;
	margin-bottom: 4px;
}

.day-label {
	width: 60px;
	font-size: 12px;
	color: #6b7280;
	display: flex;
	align-items: center;
}

.heatmap-cells {
	display: flex;
	flex: 1;
	gap: 2px;
}

.heatmap-cell {
	flex: 1;
	height: 28px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.heatmap-cell:hover {
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 1;
}

.cell-value {
	font-size: 10px;
	color: white;
	font-weight: 600;
}

.heatmap-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #f3f4f6;
}

.legend-label {
	font-size: 12px;
	color: #6b7280;
}

.legend-gradient {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gradient-bar {
	width: 120px;
	height: 16px;
	border-radius: 8px;
	background: linear-gradient(to right, #f5f7fa, #c6e48b, #7bc96f, #239a3b, #196127);
}

.gradient-min, .gradient-max {
	font-size: 11px;
	color: #9ca3af;
}

/* 工作量列表 */
.workload-list {
	padding: 20px;
}

.workload-item {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #f3f4f6;
}

.workload-item:last-child {
	border-bottom: none;
}

.workload-rank {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #667eea;
}

.workload-info {
	flex: 1;
}

.workload-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.workload-name {
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

.workload-value {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.workload-bar {
	height: 8px;
	background: #f3f4f6;
	border-radius: 4px;
	margin-bottom: 8px;
	overflow: hidden;
}

.workload-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.3s;
}

.workload-details {
	display: flex;
	gap: 16px;
}

.detail-item {
	font-size: 12px;
	color: #9ca3af;
}

/* 满意度 */
.satisfaction-overview {
	display: flex;
	padding: 20px;
	gap: 40px;
}

.satisfaction-score {
	flex-shrink: 0;
	text-align: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	color: white;
}

.score-value {
	display: block;
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 8px;
}

.score-label {
	display: block;
	font-size: 14px;
	margin-bottom: 12px;
	opacity: 0.9;
}

.score-stars {
	display: flex;
	gap: 4px;
	justify-content: center;
	font-size: 18px;
}

.satisfaction-bars {
	flex: 1;
}

.satisfaction-bar-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.satisfaction-bar-item:last-child {
	margin-bottom: 0;
}

.bar-label {
	width: 50px;
	font-size: 13px;
	color: #6b7280;
}

.bar-container {
	flex: 1;
	height: 24px;
	background: #f3f4f6;
	border-radius: 12px;
	overflow: hidden;
}

.bar-fill {
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	transition: width 0.3s;
}

.bar-percent {
	width: 50px;
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
}

.bar-count {
	width: 50px;
	text-align: right;
	font-size: 12px;
	color: #9ca3af;
}

/* 对比容器 */
.comparison-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 20px;
}

.comparison-item {
	padding: 16px;
	background: #f9fafb;
	border-radius: 8px;
}

.comparison-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.comparison-title {
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

.comparison-trend {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}

.comparison-trend.up {
	background: #f0fdf4;
	color: #10b981;
}

.comparison-trend.down {
	background: #fef2f2;
	color: #ef4444;
}

.comparison-bars {
	/* Bars styles */
}

.comparison-bar-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.comparison-bar-row:last-child {
	margin-bottom: 0;
}

.comparison-bar-row .bar-label {
	width: 40px;
	font-size: 12px;
	color: #6b7280;
}

.bar-wrapper {
	flex: 1;
	position: relative;
	height: 28px;
	background: white;
	border-radius: 6px;
	overflow: hidden;
}

.bar-wrapper .bar-fill {
	height: 100%;
	border-radius: 6px;
	transition: width 0.3s;
}

.bar-wrapper .bar-fill.current {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bar-wrapper .bar-fill.previous {
	background: #d1d5db;
}

.bar-wrapper .bar-value {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 600;
	color: white;
}

/* 数据表格 */
.data-table-panel {
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.table-actions {
	display: flex;
	gap: 8px;
}

.table-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
}

.table-scroll {
	overflow-x: auto;
}

.data-table {
	width: 100%;
	min-width: 800px;
}

.table-header {
	display: flex;
	background: #f9fafb;
	border-bottom: 2px solid #e5e7eb;
}

.table-row {
	display: flex;
	border-bottom: 1px solid #f3f4f6;
	transition: background 0.2s;
}

.table-row:hover {
	background: #f9fafb;
}

.table-cell {
	flex: 1;
	padding: 16px;
	font-size: 13px;
	color: #374151;
	text-align: center;
}

.table-header .table-cell {
	font-weight: 600;
	color: #1f2937;
}

/* 响应式 */
@media (max-width: 1400px) {
	.overview-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.comparison-container {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	
	.toolbar-left, .toolbar-right {
		width: 100%;
	}
	
	.toolbar-right {
		flex-direction: column;
	}
	
	.overview-cards, .charts-grid {
		grid-template-columns: 1fr;
	}
	
	.chart-panel.large {
		grid-column: span 1;
	}
	
	.satisfaction-overview {
		flex-direction: column;
	}
}
</style>

